<template>
  <div class="page">
    <div class="page-login">
      <div class="login-box">
        <h2 class="text-center">欢迎登录</h2>
        <form class="form">
          <ul class="nav nav-tabs">
            <li @click="handleNav('first')" class="nav-item">
              <a :class="active === 'first' ? 'active' : ''" class="nav-link" href="javascript:">验证码登录</a>
            </li>
            <li @click="handleNav('second')" class="nav-item">
              <a :class="active === 'second' ? 'active' : ''" class="nav-link" href="javascript:">密码登录</a>
            </li>
            <li @click="handleNav('third')" class="nav-item">
              <a :class="active === 'third' ? 'active' : ''" class="nav-link" href="javascript:">扫码登录</a>
            </li>
          </ul>
          <div v-show="active === 'first'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-phone"></i></span>
              <div :class="isShowDropdown ? 'show' : ''" @click.stop="handleToggle" class="dropdown">
                <a class="btn btn-outline-secondary dropdown-toggle" href="javascript:" role="button" data-toggle="dropdown" aria-expanded="false">{{ form.areaText }}</a>
                <div :style="{display: isShowDropdown ? 'block' : ''}" class="dropdown-menu">
                  <a v-for="item in areas" :key="item.value" @click.stop="handleSelect(item)" class="dropdown-item" href="javascript:">{{ item.text }}</a>
                </div>
              </div>
              <input v-model="form.phonenumber" :class="valid['phonenumber'] === false ? 'is-invalid' : ''" class="form-control" placeholder="请输入手机号" name="phonenumber" autocomplete="off" />
            </div>
            <div :class="valid['phonenumber'] === false ? 'is-block' : ''" class="invalid-feedback">请输入手机号</div>
          </div>
          <div v-show="active === 'first'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-shield-lock"></i></span>
              <input v-model="form.code" :class="valid['code'] === false ? 'is-invalid' : ''" type="text" class="form-control" name="code"
                  placeholder="请输入验证码" style="min-width: 80px">
              <span class="bsa-cursor-pointer" style="padding-left: 8px">
                <button type="button" class="btn btn-outline-secondary">获取验证码</button>
              </span>
            </div>
            <div :class="valid['code'] === false ? 'is-block' : ''" class="invalid-feedback">请输入验证码</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white "><i class="bi bi-person"></i></span>
              <input v-model="form.username" :class="valid['username'] === false ? 'is-invalid' : ''" type="text" class="form-control" placeholder="请输入用户" name="username" />
            </div>
            <div :class="valid['username'] === false ? 'is-block' : ''" class="invalid-feedback">请输入用户</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
              <input v-model="form.password" :class="valid['password'] === false ? 'is-invalid' : ''" :type="isShowPass ? 'text' : 'password'" class="form-control" placeholder="请输入密码" name="password" autocomplete="off" />
              <span @click="handleChangeShow" class="input-group-text bg-white bsa-cursor-pointer">
                <i :class="isShowPass ? 'bi-eye' : 'bi-eye-slash'" class="bi"></i>
              </span>
            </div>
            <div :class="valid['password'] === false ? 'is-block' : ''" class="invalid-feedback">请输入密码</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-shield-lock"></i></span>
              <input v-model="form.captcha" :class="valid['captcha'] === false ? 'is-invalid' : ''" type="text" class="form-control" name="captcha"
                  placeholder="请输入验证码" style="min-width: 80px">
              <img class="bsa-cursor-pointer" src="" alt="验证码" />
            </div>
            <div :class="valid['captcha'] === false ? 'is-block' : ''" class="invalid-feedback">请输入验证码</div>
          </div>
          <div v-show="active === 'third'" class="mb-3">
            <div class="qrcode">
              <div class="qrcode-img">
                <img width="128" height="128"
                  src="" />
              </div>
            </div>
          </div>
          <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap gap-3 form-action">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="remember" value="1">
              <label class="form-check-label">十天内免登录</label>
            </div>
            <span class="d-flex align-items-center justify-content-between">
              <a href="javascript:" class="link-success text-decoration-none">忘记密码?</a>
              <span class="text-black-50">&nbsp;|&nbsp;</span>
              <a href="/register" class="link-success text-decoration-none">注册新账号</a>
            </span>
          </div>
          <div class="d-grid gap-2">
            <button @click="handleSubmit" class="btn btn-primary" type="button"><i class="bi bi-box-arrow-in-right"></i> 登录</button>
          </div>
          <div class="divider">
            <div class="divider-text">其他方式登录</div>
          </div>
          <div class="d-flex align-items-center justify-content-center">
            <div class="col-8 d-flex justify-content-between">
              <a href="javascript:">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24"><path fill="#07C160" d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z" clip-rule="evenodd"></path></svg>
              </a>
              <a href="javascript:">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#50C8FD" class="ZDI ZDI--Qq24"><path fill-rule="evenodd" d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.483 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.288.687 6.288 0 0-.688-1.77-1.182-1.77-1.182 2.086-1.77 1.906-3.967 1.906-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.165-6.954-2.165-6.954V9.325C18.29 3.364 14.268 2 12.003 2Z" clip-rule="evenodd"></path></svg>
              </a>
              <a href="javascript:">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Weibo24"><path fill="#FB6622" d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.44-1.673.31-1.673.31.596-7.52-5.692-6.33-5.692-6.33-.898-1.067-.03-1.71-.03-1.71Zm4.13 6.985c-.66 1.01-1.376.126-1.375.126.205-3.179-2.396-2.598-2.396-2.598-.72-.765-.091-1.346-.091-1.346 4.882-.55 3.863 3.818 3.863 3.818ZM5.318 7.52s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.16 0 0 .848 1.094-.191 2.648 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33Zm10.448 7.792s.232-4.41-5.71-4.207c-6.652.231-6.58 4.654-6.58 4.654.022.39.098 3.713 5.843 3.713 5.98 0 6.447-4.16 6.447-4.16Zm-9.882.86s-.06-3.632 3.804-3.56c3.412.06 3.206 3.164 3.206 3.164s-.026 2.98-3.684 2.98c-3.288 0-3.326-2.584-3.326-2.584Zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.55-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998Z" clip-rule="evenodd"></path></svg>
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

export default {
  components: {
    Header,
    Footer
  },

  data () {
    return {
      active: 'first',
      isShowPass: false,
      isShowDropdown: false,
      areas: [
        {value: '+86', text: '中国 +86'},
        {value: '+1', text: '美国 +1'},
        {value: '+81', text: '日本 +81'},
        {value: '+852', text: '中国香港 +852'},
        {value: '+853', text: '中国澳门 +853'},
        {value: '+886', text: '中国台湾 +886'}
      ],
      form: {
        username: '',
        password: '',
        captcha: '',
        phonenumber: '',
        code: '',
        areaText: '中国 +86',
        areaValue: '+86'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ],
        captcha: [
          { required: true, message: '请输入验证码' }
        ],
        phonenumber: [
          { required: true, message: '请输入手机号' }
        ],
        code: [
          { required: true, message: '请输入验证码' }
        ]
      },
      valid: {
        username: null,
        password: null,
        captcha: null,
        phonenumber: null,
        code: null
      }
    }
  },

  methods: {
    // 类型切换
    handleNav (name) {
      this.active = name
    },
    handleToggle () {
      this.isShowDropdown = !this.isShowDropdown
    },
    handleSelect (item) {
      this.isShowDropdown = false
      this.form.areaText = item.text
      this.form.areaValue = item.value
    },
    // 密码切换
    handleChangeShow () {
      this.isShowPass = !this.isShowPass
    },
    // 是否验证通过
    isInValid (name) {
      let value = this.form[name]
      let rule = this.rules[name] || []
      let valid = true
      rule.forEach(item => {
        if (!value) {
          valid = false
        }
      })
      return valid
    },
    // 验证
    checkValid () {
      let result = false
      let keys = ['phonenumber', 'code']
      if (this.active === 'second') {
        keys = ['username', 'password', 'captcha']
      }
      keys.forEach(key => {
        let value = this.isInValid(key)
        this.valid[key] = value
        result = result || value
      })
      return result
    },
    // 提交
    handleSubmit () {
      let res = this.checkValid()
      if (!res) {
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .login-box {
    padding: 32px;
    width: 400px;
    background: rgba(255, 255, 255, .9);
    border-radius: 10px;
  }
  .form {
    margin-top: 36px;
  }
  .nav-tabs {
    margin-bottom: 16px
  }
  .form-control::placeholder {
    color: #aaa;
  }
  .input-group {
    .dropdown {
        margin-left: -1px;
        margin-right: -1px;
      .btn {
        border-color: #ced4da;
        border-radius: 0;
        &:hover,&:focus {
          box-shadow: none;
        }
      }
    }
    .input-group-text:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      & + .form-control {
        margin-left: -1px;
        margin-right: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .input-group-text:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    input::placeholder {
      font-size: 12px;
    }
  }
  .bsa-cursor-pointer {
    cursor: pointer;
  }
  img.bsa-cursor-pointer {
    margin-left: 8px;
    width: 120px;
    height: 38px;
  }
  .form-control {
    &:hover,&:focus {
      box-shadow: none;
    }
  }
  .form-action {
    font-size: 12px;
    .form-check-input {
      margin-top: 3px;
    }
  }
  .btn {
    display: block;
    width: 100%;
    &:hover,&:focus,&:active {
      box-shadow: none;
      outline: none;
    }
  }
  .invalid-feedback {
    padding-left: 44px;
  }
  .is-block {
    display: block;
  }
  .divider {
    position: relative;
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #eee;
    .divider-text {
      position: absolute;
      left: 50%;
      padding: 0 20px;
      transform: translateX(-50%) translateY(-50%);
      font-weight: 500;
      color: #999;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .qrcode {
    display: flex;
    justify-content: center;
    margin: 16px;
    .qrcode-img {
      padding: 8px;
      border: 1px solid #ddd;
    }
  }
  .text-xs {
    font-size: 12px;
  }
}
</style>